<!--
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:15:43
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-07-04 12:47:14
 * @FilePath     : App.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-01-08 12:15:43
-->
<script setup>
	import { computed, ref, reactive, watchEffect } from 'vue'
	import { useRoute, useRouter } from 'vue-router'

	const route = useRoute()
	const router = useRouter()

	/**
	 *
	 * default：淡入和淡出过渡同时发生
	 * in-out：新元素首先淡入。 然后当前元素淡出。
	 * out-in：当前元素先淡出。 然后新元素开始淡入。
	 *
	 */

	const transitionName = computed(() => {
		return router.currentRoute.value.meta.transition || 'fade'
		return router.currentRoute.value.meta.transition || 'fade'
	})

	const transitionMode = computed(() => {
		return transitionName.value === 'scale-slide'
			? 'default'
			: transitionName.value == 'slide'
			? 'default'
			: 'out-in'
		return transitionName.value === 'scale-slide'
			? 'default'
			: transitionName.value == 'slide'
			? 'default'
			: 'out-in'
	})

	window.onload = function () {
		document.addEventListener('touchstart', function (event) {
			if (event.touches.length > 1) {
				event.preventDefault()
			}
		})
		document.addEventListener('gesturestart', function (event) {
			event.preventDefault()
		})
	}
</script>

<template>
	<router-view v-slot="{ Component, route }">
		<component :key="route.path" :is="Component" />
	</router-view>

	<!-- <router-view #default="{route,Component}">
        <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
        </transition>
    </router-view> -->
</template>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#app {
		height: 100vh;
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
	}

	/* 渐变过渡 fade*/
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s ease;
	}

	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	/* 滑动过渡 slide*/
	.slide-enter-active,
	.slide-leave-active {
		transition: all 0.75s ease-out;
	}

	.slide-enter-to {
		position: absolute;
		right: 0;
	}

	.slide-enter-from {
		position: absolute;
		right: -100%;
	}

	.slide-leave-to {
		position: absolute;
		left: -100%;
	}

	.slide-leave-from {
		position: absolute;
		left: 0;
	}

	/* 缩放过渡 scale*/
	.scale-enter-active,
	.scale-leave-active {
		transition: all 0.5s ease;
	}

	.scale-enter-from,
	.scale-leave-to {
		opacity: 0;
		transform: scale(0.9);
	}

	/* 组合过渡 scale-slide*/
	.scale-slide-enter-active,
	.scale-slide-leave-active {
		position: absolute;
		transition: all 0.85s ease;
	}

	.scale-slide-enter-from {
		left: -100%;
	}

	.scale-slide-enter-to {
		left: 0%;
	}

	.scale-slide-leave-from {
		transform: scale(1);
	}

	.scale-slide-leave-to {
		transform: scale(0.8);
	}
	.MyFont {
		font-family: 'Palanquin Dark', sans-serif;
		font-family: 'Asap';
		font-family: 'Bungee';
		font-family: 'Fredoka One';
		font-family: 'Secular One';
		font-family: 'Tilt Neon';
	}
</style>
